<template>
    <div>
        <van-search
                v-model="value"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
        >
            <template #action>
                <div @click="onSearch">搜索</div>
            </template>
        </van-search>


        <div class="m-container">
            <h3>搜索发现</h3>
            <div class="m-context">
                <div class="m-flex" v-for="(item,index) in searchList" :key="index">
                    <span class="m-item" v-for="searchKey in item" @click="onSearch(searchKey)">
                        {{searchKey}}
                    </span>
                </div>
            </div>
        </div>

        <van-tabbar >
            <van-tabbar-item class="m-return" name="home" @click="toIndex()" icon="home-o"></van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    export default {
        name: "Search",
        data() {
            return {
                value: '',
                active: 0,
                searchList: [
                    ['全部商品', '手机'],
                    ['耳机', '电脑'],
                    ['充电宝']
                ]
            }
        },
        methods: {
            onSearch(key) {
                console.log(key)
            },
            toIndex(){
                this.$router.push({path: '/'})
            }
        }
    }
</script>

<style scoped>
    .m-return{
        background-color: orange !important;
        font-size: large;
    }
    .m-container {
        padding: 12px;
    }

    .m-context {
        padding: 0 20px;
    }

    .m-flex {
        display: flex;
        padding: 10px 0;
    }

    .m-item {
        flex: 1;
    }
</style>
